/* Less Document */
@charset "utf-8";

/*---------Warning!复用样式切勿修改----------*/
*{margin:0;padding:0;}
a{text-decoration:none;}
ul li{list-style:none;}
.width1200{width:1200px;padding:0;}
.width100{width:100%;padding:0;}
.height100{height:100%;}
.m0a{margin:0 auto;}
.mt10{margin-top:10px;}
.tc{text-align:center;}
.w100h100{width:100%;height:100%;}

.dis-n{display:none;}
.dis-b{display:block;}
.dis-f{display:flex;}

.bgc-f{background-color:#fff;}
.bgc-f3{background-color:#f3f3f3;}
.font-12{font-size:12px;}
.warning{color:#ff0000;}
.succeed{color:#32CD32;}
.insipid{color:#fff;}
.ccc{color:#ccc;}
.black{color:#000;}
.c9{color:#999999;}

.pos-re{position:relative;}
.pos-ab{position:absolute;}
/*---------Warning!复用样式切勿修改----------*/


#app{
	width:100%;
/*------------------网页头部------------------------*/
	.container:nth-child(1) {
				
		.row1{
			height:60px;
			box-shadow:0 5px 5px #ccc;
			.col11{

				div {
					height:60px;
					line-height:60px;
				}
				div:nth-child(1) {
					flex:1.5;
					
					img {
						height:30px;width:200px;
					}
				}
				div:nth-child(2) {
					flex:2;
					font-size:17px;
					padding-left:20px;
					li {
						float:left;
						width:25%;
					}
					#li-lession {
						span {
							top:3px;
						}
					}
					li:hover {
						color:#32CD32;
						transition:all 0.2s ease;
					}
				}
				div:nth-child(3) {
					flex:1;
				}
				div:nth-child(4) {
					flex:2.5;
						.h36lh {
							height:36px;line-height:36px;
						}
						input {
							width:200px;
							border-radius:18px 0 0 18px;
							border:1px solid #32CD32;
							padding-left:15px;
							right:42px;
							top:12px;
						}
						span {
							width:60px;
							border-radius:18px;
							background-color:#32CD32;
							font-size:1.5em;
							right:0;
							top:12px;
						}
				}
				div:nth-child(5) {
					flex:1;
					justify-content: space-between;
					a {
						color:#000;
						font-size:16px;
						text-decoration:none;
					}
					a:hover {
						color:#32CD32;
						transition:all 0.2s ease;
					}
				}
			}
		}
	}
/*------------------导航 轮播图 登陆 网页中部------------------------*/
	.container:nth-child(2) {
		height:380px;
		margin:10px auto;
		padding:0;
		div{
			margin:5px;
			border-radius:5px;
		}
		.left {
			flex:1;
			background-color:#272C33;
			padding:15px 0;
			ul {
				
				li {
					color:#f3f3f3;
					height:42.5px;
					font-size:15px;
					line-height:40px;
					
					span {
						text-align:center;
						width:50px;
						font-size:17px;
					}
				}
				li:hover {
					background-color:#000;
					transition:all 0.3s ease;
				}
			}
		}
		.center {
			flex:3.5;
			
			ul {
				overflow:hidden;
				li {
					float:left;
				}
			}
			.swipeItem {
				height:20px;
				width:90px;
				right:0;
				bottom:0;

				span {
					display:block;
					height:20px;
					width:20px;
					border-radius:10px;
					border:2px solid #fff;
					float:left;
					margin:0 5px;
					background-color:rgba(0,0,0,0);
				}
				.spanActive {
					background-color:#fff;
				}
			}
			
		}
		.right {
			flex:1;
			display:flex;
			display:-webkit-flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:center;
			padding:20px 10px;
			
			.top {
				line-height:22px;
				font-size:17px;
			}
			img {
				height:100px;width:100px;
			}
			.btn {
				height:40px;
				border-radius:20px;
				font-size:17px;
			}
			.bot {
				bottom:10px;
				color:#4d4d4d;
				font-size:14px;
			}
		}
	}
/*-----------------合作高校 部分-------------------------*/
	.container:nth-child(3) {
		height:60px;
		margin:5px auto;
		padding:0;
		border-radius:5px;
		display:flex;
		line-height:60px;
		
		.item {
			flex:1;
			font-size:18px;
			text-align:center;
			
			img {
				height:30px;
				width:110px;
			}
		}
		
	}
/*-------------------推荐课程 部分-----------------------*/
	.container:nth-child(4) {
		height:350px;
		padding:10px 0 0;
		margin:0 auto 40px;

		.title {
			height:60px;
			line-height:60px;
			font-size:26px;
		}
		.row4 {
			
			div {
				flex:1;
				height:270px;
				margin:0 10px;
				line-height:35px;
				
				img {
					width:100%;
					height:150px;
				}
				.time {
					position:absolute;
					top:0;
					left:0;
					height:32px;
					width:150px;
					background-color:#1B6D85;
					padding-left:5px;
				}
				.bigtitle {
					position:absolute;
					top:40px;
					font-size:26px;
					text-align:center;
				}
				.person {
					padding-left:10px;
					margin-top:10px;
				}
				.content {
					padding-left:10px;
					color:#8C8C8C;
					line-height:20px;
				}
			}
			div:nth-child(1){
				margin-left:0;
			}
			div:nth-child(5){
				margin-right:0;
			}
			div:hover {
				box-shadow:5px 5px 5px #ccc,-5px 5px 5px #ccc;
				transition:all 0.3s ease;
			}
		}
	}
/*----------------卡片推广 部分--------------------------*/
	.container:nth-child(5) {
		height:100px;
		margin:0 auto 35px;
		
		div {
			flex:1;
			margin:0 10px;
		}
		div:nth-child(1) {margin-left:0;}
		div:nth-child(3) {margin-right:0;}
	}
/*-------------------精彩讨论 部分-----------------------*/
	.container:nth-child(6) {
		height:300px;
		background-color:#6280A4;
		margin:0 auto 30px;
		padding:30px 0;
		.container6 {
			display:flex;
			.item6 {
				flex:1;
				margin:0 10px;
			}
			.item6:nth-child(1) {
				margin-left:0;
				
				img {
					top:20px;
				}
				.study {
					top:30px;
					font-size:25px;
				}
				a {
					top:50px;
					display:block;
					height:40px;
					width:200px;
					color:#fff;
					background-color:#5AB735;
					line-height:40px;
					font-size:16px;
					text-decoration:none;
				}
				a:hover {
					background-color:#32CD32;
				}
				.study-sum {
					top:60px;
				}
				
			}
			.item6:nth-child(3) {
				margin-right:0;
			}
			.item6:nth-child(2),.item6:nth-child(3) {
				
				.top {
					height:60px;
					img {
						height:40px;
						width:40px;
						border-radius:20px;
						left:15px;
						top:10px;
					}
					.name {
						top:20px;
						left:70px;
					}
					.work {
						top:20px;
						left:120px;
						background-color:#F9C63D;
						padding:0 5px;
					}
					.major {
						right:10px;
						top:17px;
						font-size:13px;
						.majorName {
							font-size:15px;
						}
					}
				}
				.cen {
					height:150px;
					padding:0 15px;
					font-size:18px;
					height:150px;
					p {top:40px;}
				}
				.bot {
					height:30px;
				}
			}
			.item6:nth-child(2):hover,.item6:nth-child(3):hover {
				box-shadow:5px 5px 3px #4d4d4d,-5px 5px 3px #4d4d4d;
				transition:all 0.3s ease;
			}
		}
	}
/*-----------------计算机 课程部分-------------------------*/
	.container:nth-child(7) {
		height:500px;
		
		.big-title {
			font-size:24px;
			height:30px;
			line-height:30px;
			margin:15px 0;
		}
		.container7 {
			margin-bottom:20px;
			.item7 {
				flex:1;
				margin:0 10px;
				height:420px;
				.item7-1 {
					height:200px;
					background-color:#fff;
					transition:all 0.5s ease;
					.img {
						height:140px;
						overflow:hidden;
						img {
							transition:all 0.5s ease;
						}
					}
					.title {
						font-size:15px;
						padding-left:8px;
						height:40px;
						line-height:40px;
						margin:0;
					}
					.bot {
						color:#C0C0C0;
						font-size:0.8em;
						padding:0 10px;
						display:flex;
						justify-content:space-between;
					}
				}
				.item7-1:hover {
					box-shadow:3px 3px 3px #ccc,-3px 3px 3px #ccc,3px -3px 3px #ccc;
					transition:all 0.5s ease;
				}
				.item7-1:hover img {
					transform:scale(1.2,1.2);
					transition:all 0.5s ease;
				}
				.first {
					margin-bottom:20px;
				}
			}
			.item7:nth-child(5) {
				margin-right:0;
			}
			.item7-left {
				flex:1;
				margin-right:10px;
				img {
					width:100%;
					height:320px;
				}
				ul{
					margin-top:10px;
					padding:0 10px;
					li{
						height:30px;
						line-height:30px;
						display:flex;
						justify-content:space-between;
					}
				}
			}
			
			
			
		}
		
	}
/*---------------------中国大学MOOC知名人物----------------------*/
	.container:nth-child(8) {
		height:560px;
		background-color:#1D2A50;
		
		.container8 {
			
			.top {
				height:120px;
				p {
					font-size:30px;
					line-height:140px;
				}
			}
			.cen {
				height:350px;
				
				div {
					flex:1;
					padding:0 40px;
					img {
						height:100px;
						width:100px;
						border-radius:50px;
					}
					.name {
						top:20px;
					}
					.school {
						top:25px;
					}
					.describe {
						top:30px;
					}
				}
			}
			.bot {
				height:110px;
				a {
					width:180px;
					height:40px;
					background-color:#5AB735;
					line-height:40px;
					color:#fff;
					text-decoration:none;
					font-size:16px;
				}
				a:hover {
					background-color:#32CD32;
				}
			}
		}
	}
	/*---------------------中国大学MOOC底部-------------------*/
	.container:nth-child(9) {
		height:210px;
		background-color:#333;
		padding-top:30px;
		
		.container9 {
			
			.le {
				flex:3;
				p {
					margin-top:10px;
					font-size:13px;
				}
			}
			.ri {
				flex:2;
				
				div {
					flex:1;
					p {
						padding-left:10px;
						font-size:16px;
						margin:0 0 20px;
					}
				}
				.ri1 {
					ul {
						li {
							a {
								padding:0 10px;
								color:#ccc;
								text-decoration:none;
								font-size:12px;
							}
							a:hover {
								color:#32CD32;
							}
						}
					}
				}
				.ri2 {
					span {
						padding-left:30px;
						font-size:20px;
					}
					span:hover {
						color:#ff0000;
					}
				}
				.ri3 {
					ul {
						li {
							a {
								padding:0 10px;
								color:#ccc;
								text-decoration:none;
								font-size:12px;
							}
							a:hover {
								color:#32CD32;
							}
						}
					}
				}
			}
		}
	}
/*------------------顶部弹出窗-------------------------*/
	.lession {
		height:400px;
		width:660px;
		border-radius:10px;
		top:60px;
		left:340px;
		z-index:99;
		box-shadow:3px 3px 3px #ccc,-3px 3px 3px #ccc,3px -3px 3px #ccc;
		padding:0 20px;
		overflow:auto;
		.bigtitle {
			height:60px;
			line-height:60px;
			font-size:15px;
			margin:0;
		}
		div {
			.smalltitle {
				font-weight:700;
				height:50px;
				line-height:50px;
				font-size:16px;
				margin:0;
			}
			.bigschool-container {
				p {
					height:35px;
					span {
						flex:1;
						display:block;
						height:30px;
						line-height:30px;
						text-align:center;
						margin:0 10px;
						background-color:rgba(0,0,0,.1);
						border-radius:15px;
					}
						
					span:hover {
						background-color:rgba(50,205,50,.1);
						color:#32CD32;
					}
				}
			}
		}
	}
	@media screen and (max-width:1200px)  {
		.lession {
			left:10px;
		}
	}
	
/*-------------------登陆弹出框-----------------------*/
	.login {
		position:fixed;
		top:0;
		background-color:rgba(0,0,0,.4);
		z-index:99;
		display:none;
		
		.window {
			height:450px;
			width:600px;
			border:1px solid #ccc;
			left:50%;
			top:50%;
			transform:translate(-50%,-50%);
			padding:20px 0 0;
			
			#removeWindowSpan {
				top:5px;
				right:5px;
				font-size:18px;
			}
			#removeWindowSpan:hover {
				color:#5CB85C;
				background-color:#f3f3f3;
			}
			.top{
				display:flex;
				margin-bottom:20px;
				div {
					flex:1;
					height:60px;
					line-height:60px;
					text-align:center;
					border-bottom:2px solid #ccc;
					float:left;
					font-size:20px;
					font-weight:500;
				}
				.itemActive {
					border-bottom:2px solid #32CD32;
					font-weight:700;
				}
			}
			.center {
				height:300px;
				width:400px;
				
				.item {
					height:45px;
					width:400px;
					margin:25px 0 15px;
					border:1px solid #ccc;
					
					input {
						width:340px;
						height:100%;
						border:none;
					}
					span {
						width:40px;
						font-size:16px;
					}
				}
				.btn1 {
					background-color:#32CD32;
					width:100%;
					height:45px;
					border:none;
					border-radius:5px;
					font-size:17px;
				}
				#login-bot-msg {
					display:flex;
					justify-content:space-between;
					
					span {
						a {
							color:#333;
						}
					}
					#regsiterA{
						color:#32cd32;
					}
				}
				#register-verify {
					width:300px;
					padding-left:20px;
				}
				#register-getVerify{
					float:left;
					width:80px;
					height:45px;
					border:1px solid #32CD32;
					border-radius:5px;
				}
			}
			.bottom{
				bottom:0px;
				height:60px;
				padding:0 100px;
				p {	
					height:40px;
					line-height:40px;
					margin:10px 0;
					span {
						display:block;
						height:40px;
						width:40px;
						line-height:40px;
						border-radius:20px;
						margin:0 29px;
						border:1px solid #333333;
						text-align:center;
						float:left;
						font-size:18px;
					}
					span:hover {
						color:#32cd32;
						border:1px solid #32cd32;
					}
				}
			}
		}
	}
}